<!doctype html>
<html lang="zh-Hans">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>wheelUi</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    /*.icon {*/
    /*  width: 1em;*/
    /*  height: 1em;*/
    /*}*/

    #app {
      margin: 20px;
    }

    body {
      /*font-size: var(--font-size);*/
      font-size: 14px;
    }

    p {padding: 10px 0;
      font-weight: bold}

    h3 {
      margin: 20px 0;
    }
  </style>
  <style>
    .demo {
      min-height: 50px;
      color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .header {
      background: #7dbcea;
    }

    .main {
      background: #108ee9;
    }

    .footer {
      background: #7dbcea;
    }

    .side {
      background: #3ba0e9;
      min-width: 100px;
    }

    /*.side.side-leave-to {*/
    /*  !*margin-left: -150px !important;*!*/
    /*}*/
  </style>

</head>
<body>
<div id="app">
  <div class="collapse">
    <h3>collapse</h3>
    <w-collapse single :selected.sync="selectedTab">
      <w-collapse-item title="标题1" name="1">
        <div>内容1</div>
      </w-collapse-item>
      <w-collapse-item title="标题2" name="2">
        <div>内容2</div>
      </w-collapse-item>
      <w-collapse-item title="标题3" name="3">
        <div>内容3</div>
      </w-collapse-item>
    </w-collapse>
  </div>
  <div class="popover">
    <h3>popover</h3>
    <div class="xxx" style="overflow: hidden;border: 1px solid green; padding: 5px;">
      <w-popover>
        <template #content="{close}">
          <div>内容</div>
          <w-button @click="close">点击关闭</w-button>
        </template>
        <w-button>hover触发top</w-button>
      </w-popover>
      <w-popover position="right">
        <template slot="content">
          <div>
            内容egfszhshtsgdcssaaaaaaaaciasjw9qahairjjdnbsaizaaasjw9qahairjjdnbsaizaaasjw9qahairjjdnbsaizaaasjw9qahairjjdnbsaizaaa
          </div>
        </template>
        <w-button>内容right</w-button>
      </w-popover>
      <w-popover position="bottom">
        <template slot="content">
          <div>内容</div>
        </template>
        <w-button>内容bottom</w-button>
      </w-popover>
      <w-popover position="left" trigger="hover">
        <template slot="content">
          <div>内容egfszhshtsgdcssaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
        </template>
        <w-button>内容left</w-button>
      </w-popover>
    </div>
  </div>
  <div class="tabs">
    <h3>Tabs</h3>
    <w-tabs :selected="selected">
      <w-tabs-head>
        <template slot="actions">
          <w-button>设置</w-button>
        </template>
        <w-tabs-item name="sports">体育</w-tabs-item>
        <w-tabs-item name="military" disabled>军事</w-tabs-item>
        <w-tabs-item name="finance">财经</w-tabs-item>
      </w-tabs-head>
      <w-tabs-body>
        <w-tabs-pane name="sports">体育相关资讯</w-tabs-pane>
        <w-tabs-pane name="military">军事相关资讯</w-tabs-pane>
        <w-tabs-pane name="finance">财经相关资讯</w-tabs-pane>
      </w-tabs-body>
    </w-tabs>
  </div>
  <div class="toast">
    <h3>Toast</h3>
    <w-button @click="toastTop">toast top</w-button>
    <w-button @click="toastMiddle">toast middle</w-button>
    <w-button @click="toastBottom">toast bottom</w-button>
  </div>
  <div class="layout">
    <h3>layout 布局</h3>
    <p>1. 上-左右-下</p>
    <w-layout style="height: 200px">
      <w-header class="demo header">header</w-header>
      <w-layout>
        <w-side class="demo side">side</w-side>
        <w-content class="demo main">content</w-content>
      </w-layout>
      <w-footer class="demo footer">footer</w-footer>
    </w-layout>
    <p>2. 左右</p>
    <w-layout style="height: 200px">
      <w-side class="demo side">side</w-side>
      <w-layout>
        <w-header class="demo header">header</w-header>
        <w-layout>
          <w-content class="demo main">content</w-content>
          <w-side class="demo side">side</w-side>
        </w-layout>
        <w-footer class="demo footer">footer</w-footer>
      </w-layout>
    </w-layout>
  </div>
  <div class="row">
    <h3>grid 网格</h3>
    <p>1. 默认样式</p>
    <w-row>
      <w-col span="2">
        <div class="col-content">1</div>
      </w-col>
      <w-col span="22">
        <div class="col-content">2</div>
      </w-col>
    </w-row>
    <p>2. align，默认靠左</p>
    <w-row gutter="20" align="left">
      <w-col>
        <div class="col-content">1</div>
      </w-col>
      <w-col>
        <div class="col-content">2</div>
      </w-col>
    </w-row>
    <p>3. 响应式布局,默认手机端</p>
    <w-row gutter="20">
      <w-col span="24" :pc="{span:4}" :widepc="{span:6}" :narrowpc="{span:6}">
        <div class="col-content">1</div>
      </w-col>
      <w-col span="24" :pc="{span:4}" :widepc="{span:6}" :narrowpc="{span:6}">
        <div class="col-content">2</div>
      </w-col>
      <w-col span="24" :pc="{span:6}" :widepc="{span:6}" :narrowpc="{span:6}">
        <div class="col-content">3</div>
      </w-col>
      <w-col span="24" :pc="{span:8,offset:2}" :widepc="{span:6,offset:0}" :narrowpc="{span:6}">
        <div class="col-content">4</div>
      </w-col>
    </w-row>
    <p>4. gutter等于20</p>
    <w-row gutter="20">
      <w-col span="2">
        <div class="col-content">1</div>
      </w-col>
      <w-col span="4">
        <div class="col-content">2</div>
      </w-col>
      <w-col span="6" offset="4">
        <div class="col-content">3</div>
      </w-col>
      <w-col span="8">
        <div class="col-content">4</div>
      </w-col>
    </w-row>
    <p>5. gutter等于20，offset等于2</p>
    <w-row gutter="20">
      <w-col span="2">
        <div class="col-content">1</div>
      </w-col>
      <w-col span="2">
        <div class="col-content">2</div>
      </w-col>
      <w-col span="4">
        <div class="col-content">3</div>
      </w-col>
      <w-col span="6">
        <div class="col-content">4</div>
      </w-col>
      <w-col span="8" offset="2">
        <div class="col-content">5</div>
      </w-col>
    </w-row>
  </div>
  <div class="box">
    <h3>输入框</h3>
    <w-input value="正常" @change="inputChange"></w-input>
    <w-input value="disable" disable></w-input>
    <w-input value="readonly" readonly></w-input>
    <w-input value="error" error="姓名不能少于两个字"></w-input>
  </div>
  <div class="button">
    <h3>按钮</h3>
    <w-button :loadings="loading1">按钮</w-button>
    <w-button :loadings="loading1" @click="loading1 = !loading1" icon="settings">按钮</w-button>
    <w-button :loadings="loading1" icon-position="right" icon="settings">按钮</w-button>
    <w-button-group>
      <w-button icon="left">上一页</w-button>
      <w-button>更多</w-button>
      <w-button icon="right" icon-position="right">下一页</w-button>
    </w-button-group>
  </div>
</div>
<script src="./src/app.js"></script>
<!--<script src="//at.alicdn.com/t/font_2064420_59n6qnriho4.js"></script>-->
</body>
</html>
